<template>
	<!-- 外侧大容器 -->
	<view class="container">
		<!-- 底部 -->
		<view class="background-view">
			<!-- 轮播图 -->
			<view class="">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
					<swiper-item v-for="(item,i) in swiperList" :key="i">
						<navigator class="swiper-item" >
							<image :src="item.associationBackgroundImg" @click="preview(i)"></image>	
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view style="height: 100px; background-color: white;"></view>
			
			<!-- 发布内容 -->
			<view class="">
				
				<view class="tab-bar">
				  <view v-for="(item, index) in tabs" :key="index" class="tab-item" :class="{ 'active': activeIndex === index }" @tap="switchTab(index)">
				    {{ item }}
				  </view>
				</view>
				<view v-if="activeIndex === 0">
					<view class="association-item" style="background-color: white;" v-for="(item, i) in associationList" :key="i">
						<view style="height: 10px;background-color: #efefef;"></view>
						<navigator class="assocition-item" :url="'/subpkg/association_trends/association_trends?id=' +item.id+'&name='+associationTitle.associationName+'&imgUrl='+associationTitle.associationImg+'&createUser='+item.createUser +'&title=动态详情' ">
							<view class="association-title"  >
								<!-- 社团头像 放左面-->
								<view class="association-title-left">
									<image class="association-title-img" :src="associationTitle.associationImg || defaultPic" ></image>
								</view>
								<!-- 名称和时间放面-->
								<view class="association-title-right">
									<view class="association-title-name">{{associationTitle.associationName}}</view>
									<view class="association-title-time">{{item.createTime}}</view>
								</view>
								
							</view>
						
						
						<view class="association-info">
							<view class="association-introduce">{{item.content}}</view>
							<!-- 图片 -->
							<view class="association-info-img" v-if="item.imgUrl != ''">
								<view class="association-img"  v-for="(item2, i2) in item.imgUrl.split(',')" :key="i2"  >
									<image class="association-img-item" :src="item2"  ></image>
								</view>
							</view>
							
						</view>
						</navigator>
						<!-- 评论和点赞数量显示 -->
						<view class="association-comment-like">
							
							<view class="association-comment">
								<navigator :url="'/subpkg/association_trends/association_trends?id=' +item.id+'&name='+associationTitle.associationName+'&imgUrl='+associationTitle.associationImg +'&createUser='+item.createUser+'&title=动态详情'">
									<uni-icons type="chat" size="24"></uni-icons>
									{{item.hotspotsReviewNum}}
								</navigator>
								
							</view>
							
							<view class="association-like" v-if="item.userLikesFlag===true" style="color:red" @click="likeOrRemoveHotspot(item,i)">
								<uni-icons type="hand-up" color='red' size="22"></uni-icons>
								{{item.hotspotsLikesNum}}
							</view>
							<view class="association-like" v-else  @click="likeOrRemoveHotspot(item,i)" >
								<uni-icons type="hand-up" size="22"></uni-icons>
								{{item.hotspotsLikesNum}} 
							</view>
						</view>
					</view>
				</view>
				<view v-if="activeIndex === 1">
					<view class="competition-one"  v-for="(item, i) in associationActiveList" :key="i" >
						<navigator class="competition-nav" :url="'/subpkg/activity_signup/activity_signup?id=' +item.id">
								<image  class="competition-img" :src="item.activityImg" ></image>
								<view  class="competition-name">
									<!-- 在图片上添加文字 -->
									<text  class="textTitle">
										{{item.activityTitle}}
									</text>
								</view>
							</navigator>
							<view class="competition-txt">
								<view class="competition-txt-left">
									
								</view>
								<view class="competition-txt-right">
									<view class="state" >状态：{{competitonState(item.status)}}</view>
								</view>
								
							</view>
					</view>
				</view>
				<view v-if="activeIndex === 2">
				</view>
			</view>
		</view>
		<!-- 上面 -->
		<view class="foreground-view" v-if="pullOpen==false">
			<!-- 社团名称 -->
			<view  class="association-name">{{associationTitle.associationName}}</view>
			<!-- 社团关注人数和关注状态-->
			<view class="association-people-state">
				  <view class="association-people">{{associationTitle.associationFollow}}关注</view>
				  <view class="association-state-true" v-if="associationTitle.followTableId">
					<view @click="concern(associationTitle.followTableId)">
						<uni-icons type="checkmarkempty" size="14" ></uni-icons> 
						已关注
					</view>
				  </view>
				  <view class="association-state-false" v-else >
					<view   style="color : red" @click="concern(associationTitle.followTableId)">
						<uni-icons type="plusempty" size="12" color="red" ></uni-icons> 
						关注
					</view>
				  </view>
				  <view class="association-in" v-if="associationTitle.checkIfMember==null">
					<view   style="color : red" @click="toggle('bottom')">
						<uni-icons type="plusempty" size="12" color="red" ></uni-icons> 
						申请加入
					</view>
				  </view>
				  <view  v-else>
				  		<view class="association-in"  v-if="associationTitle.checkIfMember.status==0">
							<view   style="color : red" >
								待审核
							</view>
						</view>
						<view class="association-alread-in" v-else-if="associationTitle.checkIfMember.status==1">
							<view   style="color :  #070707" >
								{{associationTitle.checkIfMember.memberPosition}}
							</view>
						</view>
						<view class="association-in" v-else-if="associationTitle.checkIfMember.status==2">
							<view   style="color : red" @click="toggle('bottom')">
								<uni-icons type="plusempty" size="12" color="red" ></uni-icons> 
								申请加入
							</view>
				  		</view>			
				  </view>
				  
				 
			</view>
			<!-- 社团简介-->
			<view class="association-up-introduce">简介：{{associationTitle.associationIntroduction}}</view>
			<!-- 下拉标志-->
			<view class="association-down" @click="pullViewOpen(pullOpen)">
				<image class="association-image-down" src="../../static/icon/down.png"></image> 
			</view>
			
		</view>
		
		<view class="foreground-view-open" v-if="pullOpen==true">
			<!-- 社团名称 -->
			<view  class="association-name">{{associationTitle.associationName}}</view>
			<!-- 社团关注人数和关注状态-->
			<view class="association-people-state">
				  <view class="association-people">{{associationTitle.associationFollow}}人关注</view>
				  <view class="association-people">{{associationTitle.associationFollow}}个会员</view>
			</view>
			<!-- 社团简介-->
			<view class="association-up-introduce">简介：{{associationTitle.associationIntroduction}}</view>
			
			<view class="member">
				
				<view class="member-main"  v-for="(item, i) in associationTitle.associationMemberVOList" :key="i" >
					<!-- 头衔 -->
					<text class="member-title">{{item.memberPosition}}</text>
					<!-- 头像 -->
					<image class="member-image" :src="item.headerUrl || defaultPic" @click="previewMember(i,item)"></image>
					<!-- 名称 -->
					<view  class="member-name">{{item.memberName}}</view>
				</view>
				
			</view>
			<!-- 下拉标志-->
			<view class="association-up" @click="pullViewOpen(pullOpen)">
				<image class="association-image-up" src="../../static/icon/up.png"></image> 
			</view>
			
		</view>
		<view v-if="associationTitle.checkIfMember!=null&&associationTitle.checkIfMember.status==1">
			<uni-fab  ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		</view>
		
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change" >
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<uni-section title="个人信息" type="line">
						<view class="example">
							<!-- 基础表单校验 -->
							<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px">
								<uni-forms-item label="姓名" required name="name">
									<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名"  />
								</uni-forms-item>
								<uni-forms-item label="手机号" required name="tel">
									<uni-easyinput v-model="valiFormData.tel" placeholder="请输入手机号" />
								</uni-forms-item>
								<uni-forms-item label="入会年" required name="year">
									<picker mode="date" fields="year" value="{{valiFormData.year}}" :start="startDate" :end="endDate" @change="bindDateChange">
										 
										 <uni-easyinput :inputType="'text'"
									      v-model="valiFormData.year"
									      @click="openPicker"></uni-easyinput>
									</picker>
								</uni-forms-item>
								<uni-forms-item label="申请理由" required name="reason">
									<uni-easyinput v-model="valiFormData.reason" placeholder="申请理由" />
								</uni-forms-item>
							</uni-forms>
							
							<button :disabled="isDisabled" type="primary" @click="submit('valiForm')">提交</button>
						</view>
					</uni-section>
				</view>
			</uni-popup>
		</view>
	</view>
	
</template>

<script>
	import { mapState} from 'vuex'
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
	
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}else if(type === "now"){
			year = year;
		}
	
		return `${year}`;
	}
	export default {
		data() {
			return {
				competitionState: {
				  signuping: { name: '报名中', value: 0},
				  end: { name: '已结束', value: 3}
				},
				type:'start',
				//传值过来的id,即社团的id
				associationId: 0,
				isDisabled: false,
				//轮播图数据
				swiperList: [],
				swiperListImage: [],
				memberImages: [],
				tabs: ['动态', '活动', '荣誉'],
				activeIndex: 0, // 当前激活的选项卡索引
				// 请求参数对象
				queryObj: {
					// 页码值
					pageNo: 1,
					// 每页显示多少条数据
					pageSize: 3
				},
				// 请求活动参数对象
				queryActiveObj: {
					// 1-活动 2-比赛
					activityType: 1,
					// 页码值
					pageNo: 1,
					// 每页显示多少条数据
					pageSize: 10,
				},
				// 校验表单数据
				valiFormData: {
					name: '',
					tel: '',
					year: getDate("now"),
					reason: '',
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							format: 'number',
							errorMessage: '手机号只能输入数字'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '申请理由不能为空'
						}]
					},
				},
				
				//社团动态
				// 是否正在请求数据
				data: [],
				isloading: false,
				associationList:[],
				associationNum:0,
				//社团活动
				activeData: [],
				isloadingActive: false,
				associationActiveList:[],
				associationActiveNum:0,
				//社团荣誉
				isloadingHonor: false,
				associationHonorList:[],
				associationHonorNum:0,
				// 总数量，用来实现分页
				total: 0,
				defaultPic:
				'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				
				associationTitle: [],
				associationPeople: 0,
				pullOpen: false,
				
				//下面是发布的图标需要的东西
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				//点赞的id
				likeId:0,
				//是否是这个社团的成员，如果是显示发布的加号，如果不是，不显示
				ifMember:0,
				
				startDate:getDate('start'),
				endDate:getDate('end'),
				content: [{
						iconPath: '/static/fabu/hotspot.png',
						selectedIconPath: '/static/fabu/hotspot.png',
						text: '发布动态',
						active: false,
					},
					// {
					// 	iconPath: '/static/home.png',
					// 	selectedIconPath: '/static/home-active.png',
					// 	text: '发布活动',
					// 	active: false
					// }
					
				]
			};
		},
		onShow(options) {
		      this.loadData();
		},
		computed: {
		  ...mapState('m_user', ['userId']),
			//学校id
		  ...mapState('m_dept', ['deptId'])
		},
		onLoad(options) {
			this.baseUrl=uni.$http.baseUrl
			
			// 获取协会Id
			this.associationId = options.id
			
			//const id =1
			//获取轮播图的数据
			this.getSwiperList(this.associationId)
			// //得到的社团发布的活动内容
		//	this.getAssociationList()
			
		},
		methods: {
			loadData() {
			      // 假设的数据加载逻辑
			       this.getAssociationList(1);
			 },
			openPicker() {
				// 打开选择器
				this.$refs.picker.open();
			  },
			bindDateChange(e) {
			   this.valiFormData.year = e.target.value;
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			async getSwiperList(id){
				await uni.request({
					url: this.baseUrl+'/api/association/getAssociationInfo', 
					data: {
						// 社团Id
						id: id,
						// 页码值
						userId: this.userId,
					},
					method: 'POST',
					header: {
						  // "Content-Type": "application/json",
						  "Content-Type": "application/x-www-form-urlencoded"
						},
					success: (res) => {
						// ** 关闭节流阀
						this.swiperList[0] = res.data.data
						//社团背景图
						this.swiperListImage[0] = res.data.data.associationBackgroundImg
						//社团
						this.associationTitle = res.data.data
						
					},
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			
			
			
			
			//获取热点动态  1指刷新页面时，直接显示从第一页开始的，0时触底的，需要把以前的数据拼接起来
			async getAssociationList(flag) {
				//如果是刷新页面的，从第一页开始
				if(flag==1){
					this.queryObj.pageNo=1
				}
				// ** 打开节流阀
				this.isloading = true
				await uni.request({
					url: this.baseUrl+'/api/hotspot/getHotspot',
					data: {
						loginUserId: this.userId,
						deptId: this.deptId,
					    associationId: this.associationId,
					    // 页码值
					    pageNo: this.queryObj.pageNo,
					    // 每页显示多少条数据
					    pageSize: this.queryObj.pageSize,
					},
					method: 'POST',
					header: {
						//"Content-Type": "application/json",
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						// ** 关闭节流阀
						this.isloading = false
						this.data=res.data
						if(flag==1){
							this.associationList=this.data.data
						}else{
							this.associationList=[...this.associationList, ...this.data.data] 
						}
					},
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			 },
			 //获取活动
			 async getAssociationActiveList() {
			 	// ** 打开节流阀
			 	this.isloadingActive = true
			 	await uni.request({
			 		url: this.baseUrl+'/api/activity/getActivityList',
			 		data: {
			 			deptId: this.deptId,
			 		    associationId: this.associationId,
						status:'99',
						activityType: this.queryActiveObj.activityType,
			 		    // 页码值
			 		    pageNo: this.queryActiveObj.pageNo,
			 		    // 每页显示多少条数据
			 		    pageSize: this.queryActiveObj.pageSize,
			 		},
			 		method: 'POST',
			 		header: {
			 			//"Content-Type": "application/json",
			 			"Content-Type": "application/x-www-form-urlencoded"
			 		},
			 		success: (res) => {
			 			this.activeData=res.data
			 			this.associationActiveList=[...this.associationActiveList, ...this.activeData.data] 
			 			this.associationActiveNum = this.activeData.data.length
						console.log(this.associationActiveList)
			 		},
			 		fail: (res) =>{
			 			if (res.statusCode !== 200) return uni.$showMsg()
			 		}
			 	});
			  },
			 // 实现轮播图的预览效果
			 preview(i) {
				 // 调用 uni.previewImage() 方法预览图片
				 uni.previewImage({
					 // 预览时，默认显示图片的索引
					 current: i,
					 // 所有图片 url 地址的数组
					 urls: this.swiperListImage.map(x => x),
				 })
			 },
			 // 实现轮播图的预览效果
			 previewMember(i,item) {
				this.memberImages[0]=item.memberImage
				 // 调用 uni.previewImage() 方法预览图片
				 uni.previewImage({
					 // 预览时，默认显示图片的索引
					 current: i,
					 // 所有图片 url 地址的数组
					 urls: this.memberImages.map(x => x),
				 })
			 },
			 previewInfo(i,i2) {
				 // 调用 uni.previewImage() 方法预览图片
				 uni.previewImage({
					 // 预览时，默认显示图片的索引
					 current: i2,
					 // 所有图片 url 地址的数组
					 urls: this.associationList[i].imgUrl.split(',').map(x => x)
				 })
			 },
			 concern(followTableId){
			 	if(followTableId==null){
			 		this.setAssociationState(followTableId,this.associationId)
					this.associationTitle.associationFollow+=1
			 	 }else{
			 		this.cancleAssociationState(followTableId,this.associationId)
					this.associationTitle.associationFollow-=1;
			 	 }
			 },
			 //关注
			 async setAssociationState(followTableId,associationId){
			 	await uni.request({
			 		url: this.baseUrl+'/api/association/followAssociation', //仅为示例，并非真实接口地址。
			 		data: {
			 			// 社团Id
			 			associationId: associationId,
			 			// 关注人
			 			followId: this.userId,
			 		},
			 		method: 'POST',
			 		header: {
			 			"Content-Type": "application/json",
			 			  // "Content-Type": "application/x-www-form-urlencoded"
			 		},
			 		success: (res) => {
			 			this.associationTitle.followTableId=res.data.msg
			 		},
			 		fail: (res) =>{
			 			if (res.statusCode !== 200) return uni.$showMsg()
			 		}
			 	});
			 },
			 //取消关注
			 async cancleAssociationState(followTableId){
			 	await uni.request({
			 		url: this.baseUrl+'/api/association/cancelFollowAssociation', //仅为示例，并非真实接口地址。
			 		data: {
			 			// 社团Id
			 			id: followTableId,
			 		},
			 		method: 'POST',
			 		header: {
			 			  // "Content-Type": "application/json",
			 			  "Content-Type": "application/x-www-form-urlencoded"
			 		},
			 		success: (res) => {
			 			 this.associationTitle.followTableId=null
			 		},
			 		
			 	});
			 },
			 
			 pullViewOpen(pullOpen){
				if(pullOpen==true){
					this.pullOpen=false
				}else{
					this.pullOpen=true
				}
				
			 },
			switchTab(index) {
			  this.activeIndex = index;
			  if(index==0){
				  //切换tab时，重置参数
				  // 1. 重置关键数据
				  this.queryObj.pageNo = 1
				  this.isloading = false
				  this.associationList = []
				  this.associationNum = 0
				  this.getAssociationList(1)
			  }else if(index==1){
				  //  重置关键数据
				 this.queryActiveObj.pageNo = 1
				 this.isloadingActive = false
				 this.associationActiveList = []
				 this.associationActiveNum = 0
				 this.getAssociationActiveList()
			  }else{
				  //  重置关键数据
				  this.queryEndObj.pageNo = 1
				  this.isloadingEnd = false
				  this.competitionEndList = []
				  this.competitionEndNum = 0
				  this.getCompetitionEndList()
			  }
			  
			},
			likeOrRemoveHotspot(item,index){
				if(item.userLikesFlag==null||item.userLikesFlag==false){
					this.likeHotspot(item,index)
				}else{
					this.cancelLikeHotspot(item,index)
				}
			},
			//点赞校园热点
			async likeHotspot(item,index){
				await uni.request({
					url: this.baseUrl+'/api/hotspot/likeHotspot', 
					data: {
						// 社团Id
						id: this.id,
						// 页码值
						userId: this.userId,
						hotspotId: item.id,
						
					},
					method: 'POST',
					header: {
						   "Content-Type": "application/json",
						 // "Content-Type": "application/x-www-form-urlencoded"
						},
					success: (res) => {
						// ** 关闭节流阀
						//如果点赞成功了,就给这个评论放true
						this.associationList[index].userLikesFlag=true
						this.associationList[index].hotspotsLikesNum+=1
						//点赞的id
						this.likeId=res.data
					},
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			//取消校园热点
			async cancelLikeHotspot(item,index){
				if(this.associationList[index].userLikesId!=null){
					this.likeId=this.associationList[index].userLikesId
				}
				await uni.request({
					url: this.baseUrl+'/api/hotspot/cancelLikeHotspot', 
					data: {
						// 点赞Id
						id: this.associationList[index].userLikesId,
					},
					method: 'POST',
					header: {
						  //  "Content-Type": "application/json",
						 "Content-Type": "application/x-www-form-urlencoded"
						},
					success: (res) => {
						// ** 关闭节流阀
						//如果点赞成功了,就给这个评论放true
						this.associationList[index].userLikesFlag=false
						this.associationList[index].hotspotsLikesNum-=1
					},
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			
			//发布的按钮
			fabClick() {
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				})
			},
			trigger(e) {
				this.content[e.index].active = !e.item.active
				if(e.index==0){
					
					uni.navigateTo({
						url: '/subpkg/release/release?associationId='+this.associationId
					})
				}else if(e.index==1){
					uni.navigateTo({
						url: '/subpkg/release/release'
					})
				}
				
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.valiFormData.name=res.name
					this.valiFormData.tel=res.tel
					this.valiFormData.year=res.year
					this.reason=res.reason
					//提交申请
					this.applyToJoin()
				}).catch(err => {
					console.log('err', err);
				})
				
			},
			//提交报名信息
			async applyToJoin(){
				await uni.request({
					url: this.baseUrl+'/api/association/joinAssociation', 
				    data: {
				        // 社团Id
				        associationId: this.associationId,
						//登录者的id
						memberId: this.userId,
						name: this.valiFormData.name,
						memberContact: this.valiFormData.tel,
						entryYear: this.valiFormData.year,
						createUser: this.userId,
						exp1: this.valiFormData.reason
				    },
					method: 'POST',
				    header: {
				        "Content-Type": "application/json",
				         // "Content-Type": "application/x-www-form-urlencoded"
				    },
				    success: (res) => {
						if(res.data.code==200){
							uni.showToast({
								title: `已申请`
							}),
							this.isDisabled=true
							this.$refs.popup.close()
							//申请状态改为0，待审核
							this.getSwiperList(this.associationId)
						}else{
							uni.showToast({
								title: `申请失败`,
								icon: 'error',
							})
						}
						
				    },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			competitonState(state){
				//0-报名中  1-待开始  2-进行中  3-已结束
				if(state==this.competitionState.signuping.value){
					return this.competitionState.signuping.name
				}else if(state==this.competitionState.end.value){
					return this.competitionState.end.name
				}
			}
		},
		
		// 触底的事件
		onReachBottom() {
			//0是第一个tab,报名中
			if(this.activeIndex==0){
			  // 判断是否还有下一页数据
			  if (this.associationList.length < this.queryObj.pageSize*this.queryObj.pageNo)
			  return uni.$showMsg('数据加载完毕！')
			  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
			  if (this.isloading) return
			   // 让页码值自增 +1
			   this.queryObj.pageNo += 1
			   // 重新获取列表数据
			   this.getAssociationList(0)
			}else if(this.activeIndex==1){
				
			  // 判断是否还有下一页数据
			  if (this.associationActiveList.length < this.queryActiveObj.pageSize*this.queryActiveObj.pageNo)
			  return uni.$showMsg('数据加载完毕！')
			  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
			  if (this.isloadingActive) return
			   // 让页码值自增 +1
			   this.queryActiveObj.pageNo += 1
			   // 重新获取列表数据
			   this.getAssociationActiveList()
			}else{
					 
			}
		},
		
		
	}
</script>

<style lang="scss">
.container {
  position: relative;
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  .background-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 根据需要设置高度 */
	z-index: 1; /* 设置为较小的z-index值，使其在下层 */
  }
  .foreground-view{
  	// position: absolute;
	margin-top: 100px;
  	width: 70%;
  	height: 150px; /* 根据需要设置高度 */
	z-index: 2; /* 设置为较大的z-index值，使其在上层 */
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
	border-radius: 30px; /* 圆角 */
	border: 1px solid #bababa;
  }
  .foreground-view-open{
  	// position: absolute;
  	margin-top: 100px;
  	width: 70%;
  	height: 250px; /* 根据需要设置高度 */
  	z-index: 2; /* 设置为较大的z-index值，使其在上层 */
  	padding: 20px;
  	background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
  	border-radius: 30px; /* 圆角 */
  	border: 1px solid #bababa;
  }
}
swiper{
	height: 330rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	.swiper-item,
	image{
		width: 100%;
		height: 100%;
	}
}
.association-title{
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: white;
	display: flex;
	.association-title-left{
		padding-left: 10px;
		width: 10%;
		.association-title-img{
			width: 30px; /* 宽度应该和高度相同 */
			height: 30px;
			border-radius: 50%; /* 圆形效果 */
		}
	}
	.association-title-right{
		width: 70%;
		.association-title-name{
			font-size: 16px;
		}
		.association-title-time{
			font-size: 10px;
			font-weight: 300px;
			color: #d0d0d0;
		}
	}
	.association-title-right-icon{
		background-color: aqua;
		width: 10%;
	}
}
.association-info{
	background-color: white;
	.association-info-title{
		padding-left: 20px;
		padding-right: 10px;
		margin-bottom: 10px;
		font-size: 20px;
	}
	.association-introduce{
		padding-left: 20px;
		padding-right: 10px;
		margin-bottom: 10px;
	}
	.association-info-img{
		display: flex;
		flex-wrap: wrap;
		.association-img{
			
			width: 32.8%;
			height: 100px;
			margin: 1px;
			  
			.association-img-item{
				width:100%;
				height: 100%;
			}
		}
	}
}
.association-comment-like{
	margin-top: 10px;
	border-top: solid 1px #efefef;
	padding-top: 5px;
	display: flex;
	text-align: center;
	align-items: center;
	background-color: white;
	.association-comment{
		width: 50%;
		uni-icons{
			align-items: center;
		}
	}
	.association-like{
		width: 50%;
		uni-icons{
			align-items: center;
		}
	}
}
.association-name{
	font-size: 20px;
	text-align: center;
}
.association-people-state{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 5px;
	.association-people{
		font-size: 12px;
		margin-right: 5px;
	}
	.association-state-true,.association-state-false{
		padding-left: 5px;
		padding-right: 5px;
		margin-left: 5px;
		font-size: 12px;
		border-radius: 5px; /* 圆角 */
	}
	.association-state-false{
		border: 1px solid #fd5000;
		
	}
	.association-state-true{
		border: 1px solid #070707;
		
	}
	.association-in,.association-alread-in{
		padding-left: 5px;
		padding-right: 5px;
		margin-left: 5px;
		font-size: 12px;
		border-radius: 5px; /* 圆角 */
		
	}
	.association-in{
		border: 1px solid #fd5000;
	}
	.association-alread-in{
		border: 1px solid #070707;
	}
}

.association-up-introduce{
	font-size: 12px;
	height: 50px;
	overflow-y: auto;
	margin-top: 5px;
	margin-bottom: 10px;
}
.association-down{
	height: 10px;
	text-align: center;
	.association-image-down{
		width: 10%;
		height: 100%;;
	}
}
.member{
	display: flex;
	flex-direction: row;
	.member-main{
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20px;
		.member-title{
			padding-left: 10px;
			padding-bottom: 10px;
			font-size: 12px;
			font-weight: bold;
		}
		.member-image{
			width: 50px; /* 宽度应该和高度相同 */
			height: 50px;
			border-radius: 50%; /* 圆形效果 */
		}
		.member-name{
			padding-left: 10px;
			padding-top: 10px;
			font-size: 12px;
		}
	}
	
}
.association-up{
	height: 15px;
	text-align: center;
	.association-image-up{
		width: 10%;
		height: 100%;;
	}
}
.tab-bar {
  display: flex;
  background-color: white;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
.active {
  color: #07a0ff;
  border-color: #07a0ff;
}
@mixin flex {
	display: flex;
}
.popup-content {
	@include flex;
	justify-content: center;
	padding: 15px 0px;
	background-color: #fff;
}
.competition-one{
	
    height: 180px;
	margin-bottom: 10px;
	margin-top: 10px;
   .competition-nav{
	   position: relative;
	   height: 80%;
	   .competition-img{
		   width: 100%;
		   height: 100%;
	   }
	   .textTitle  {
	       position: absolute;
		   bottom: 20px;
	       color: #ffffff; /* 设置文字颜色 */
	       font-size: 15px; /* 设置文字大小 */
	       left: 3%; /* 水平居中 */
		   width: 70%;
		   font-weight: bold;
			mix-blend-mode: difference; /* 可选的混合模式，根据背景图片的颜色来调整 */
	   }
   }
   .competition-txt{
	   color: #858585;
	   display: flex;
	   justify-content: space-around;
	   .competition-txt-right{
		   margin-left: auto;
		   margin-right: 7px;
		   display: flex;
		   flex-direction: column;
	   }
   }
}

</style>
